@charset "utf-8";
@import "common";

.web{
    .slide{
        padding-top: 50px;
        background-color: #2B80D9;
//      @media (min-width: 1200px){
//          .container {
//              width: 1000px;
//          }
//      }
        .pic{
            width: 100%;
            img{
                width: 100%;
            }
            &:hover{
                opacity: .8;
            }
        }
    }
//===content1=============================================
    .layaflash{
        border-bottom: solid 1px #EAEAEE;
        background-color: #FBFAF7;
        @media (min-width: 1200px) {
            .container{
                width: 1000px;
                padding: 60px 15px;
            }

        }
        .flash-bg{
            background: url(../img/flash-bg.jpg) no-repeat right;
            background-position: 100% 100%;
            
            h1{
                border: 0 none;
                font-size: 48px;
                font-weight: bold;
                color: #0078d7;
                
            }
            p{
                font-size: 32px;
                color: #666;
            }
            @media (max-width: 767px) and (min-width: 480px){
                h1{
                    font-size: 42px;
                }
                p{
                    font-size: 40px;
                }
            }
            @media (max-width: 480px) {
                h1{
                    font-size: 21px;
                    text-align: center;
                }
                p{
                    font-size: 20px;
                }
                
            }
            
        }
        @media (max-width: 768px) {
            .flash-bg{
                background: none;
            }
        }
    

        .flash-cont{
            @media (min-width:982px) {
                padding-top: 60px;
            }
            
            .flash-item{
                margin-bottom: 30px;
                .flash-icon{
                    width: 64px;
                    height: 64px;
                    border-radius: 5px;
                    margin-left: 0;
                    background-color: #0078D7;
                    background-size: contain;
                    transition: all 0.8s ease-in-out 0s;
                    &:hover{
                        background-color: #8D8C8C;
                        transform: rotate(360deg);
                    }
                }
                .icon1{
                    background-image: url(../img/flash-001.png);
                }
                .icon2{
                    background-image: url(../img/flash-002.png);
                }
                .icon3{
                    background-image: url(../img/flash-003.png);
                }
                .icon4{
                    background-image: url(../img/flash-004.png);
                }

                .flash-desc{
                    h3{
                        font-size: 20px;
                        color: #333;
                        margin-top: 0;
                    }
                    p{
                        font-size: 14px;
                        color: #666;
                    }
                }
            }
        }   
    }
//==content2=====================================================
    .layaadv{
        @media (min-width: 1200px) {
            .container{
                width: 1000px;
                padding: 89px 15px;
            }
        }
        .adv-pic{
            padding-top: 100px;
            
            img{
                width: 100%;
                &:hover{
                    opacity: .8;
                }
            }
            
        }
        
        .adv-title{
            font-size: 3.43em;
            color: #8fc31f;
            font-weight: bold;
        }
        @media (max-width: 480px) {
            .adv-title{
                font-size: 1.5em;
            }
        }
        .adv-list{
            padding-top: 30px;
            ul{
                padding-left: 0;
                li{
                    font-size: 1em;
                    color: #727171;
                    line-height: 50px;
                    padding-top: 10px;
                    padding-bottom: 10px;
                    span{
                        line-height: 20px;
                    }
                   .icon{
                        width: 54px;
                        height: 54px;
                        border-radius: 100%;
                        margin: 0 10px;
                        float: left;
                        background-color: #8fc31f;
                    } 
                    .adv-icon1{
                        background-image: url(../img/ad01.png);
                    }
                    .adv-icon2{
                        background-image: url(../img/ad02.png);
                    }
                    .adv-icon3{
                        background-image: url(../img/ad03.png);
                    }
                    .adv-icon4{
                        background-image: url(../img/ad04.png);
                    }
                }
                @media (max-width: 375px){
                    li{
                        line-height: 30px;
                    }
                }
            }
            
        }
    }
//==content3======================================================    
    .product{
        background-color: #0079D7;
        padding-top: 54px;
        padding-bottom: 102px;
//      @media (min-width: 1200px) {
//          .container{
//              width: 1000px;
//          }
//      }
        .page-header{
            font-size: 3.43em;
            line-height: 80px;
            color: #fff;
            font-weight: normal;
            border: 0 none;
        }
        @media (max-width: 982px){
            .page-header{
                font-size: 36px;
            }
        }
        @media (max-width: 480px) {
            .page-header{
                font-size: 1.5em;
                margin-top: 0;
            }
        }
        .laya-pro{
            width: 100%;
//          height: 180px;
            margin-top: 20px;
            margin-bottom: 5px;
            float: left;
            .pro-icon{
                height: 110px;
                float: left;
            }
            .icon1{
                background: url(../img/pro001.png) center no-repeat;
            }
            .icon2{
                background: url(../img/pro002.png) center no-repeat;
            }
            .icon3{
                background: url(../img/pro003.png) center no-repeat;
            }
            .icon4{
                background: url(../img/pro004.png) center no-repeat;
            }
            .icon5{
                background: url(../img/pro005.png) center no-repeat;
            }
            .icon6{
                background: url(../img/pro006.png) center no-repeat;
            }
            
            
            .pro-desc{
                h4{
                    font-size: 2.28em;
                    color: #ffffff;
                }
                p{
                    height: 90px;
                    line-height: 30px;
                    text-align: left;
                    font-size: 1em;
                    color: #ffffff;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical
                }
            }
        }
    }
//==content4==========================================
    .game{
        padding-top: 26px;
        padding-bottom: 54px;
        .page-header{
            text-align: left;
            font-size: 2.58em;
            padding-bottom: 30px;
            border: none;
        }
        .game-more{
            padding-top: 50px; 
            text-align: right;
            a{
                font-size: 1.14em;
                color: #666;
            }
        }
        .laya-video{
//          width: 410px;
            height: 210px;
            background-color: #000;
        }
        .game-cont{
            text-align: center;
            img{
                height: 67px;
                
                margin: 5px auto;
                &:hover{
                    opacity: .8;
                }
            }
            p{
                text-align: center;
            }
        }
    }
//合作伙伴
    .partner{
        background-color: #F4F4F4;
        padding-bottom: 40px;
        .page-header{
            border: 0 none;
            span{
                font-size: 0.4em;
            }
        }
        .partner-item{
            padding-right: 0;
            &:hover{
                opacity: .8;
            }
        }
    }
}